<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {doGet, doPost} from "@/util/request.js";
import {showMessage} from "@/util/message.js";

//路由
const router = useRouter()
//添加产品弹窗控制
const centerDialogVisible = ref(true)

//支付产品下拉列表
let payProductOption = ref([])
//支付方式下拉列表
let payWayOption = ref([])
//支付类型下拉列表
let payTypeOption = ref([])

//页面加载，显示支付产品
onMounted(() => {
  loadPayWayDic()
})
//支付方式选择事件
const selectPayTypeOption = (wayCode) => {
  loadPayTypeDic(wayCode)
}

//查询支付产品列表
const queryProductDic = (label) => {
  let data = {
    productName: label
  }
  if (label.length > 1) {
    doGet('/product/dicList', data).then(resp => {
      if (resp.data.code === 200) {
        payProductOption.value = resp.data.data
      }
    })
  }
}
//查询支付方式字典表
const loadPayWayDic = () => {
  doGet('/payWay/wayDicList', '').then(resp => {
    if (resp.data.code === 200) {
      payWayOption.value = resp.data.data
    }
  })
}
//查询支付类型字典表
const loadPayTypeDic = (wayCode) => {
  let data = {
    wayCode: wayCode
  }
  doGet('/payWay/typeDicList', data).then(resp => {
    if (resp.data.code === 200) {
      payTypeOption.value = resp.data.data
    }
  })
}

//添加产品支付表单对象
const payWayForm = ref({
  productCode: '',
  wayCode: '',
  typeCode: '',
  payRate: 0.6,
  sorts: '1'
})

//添加支付方式
const add = () => {

  let formData={
    productCode: payWayForm.value.productCode,
    wayCode: payWayForm.value.wayCode,
    typeCode: payWayForm.value.typeCode,
    payRate: payWayForm.value.payRate,
    sorts: payWayForm.value.sorts
  }
  //发送添加请求
  doPost('/payWay/add', formData).then(resp => {
    if (resp.data.code === 200) {
      //提示信息
      showMessage('添加支付方式成功', 'success')
      //等待600毫秒
      setTimeout(() => {
        //返回上一页
        router.go(-1)
      }, 500)
    } else {
      //提示信息
      showMessage('添加支付方式失败: ' + resp.data.msg, 'error')
    }
  })
}
//重置
const onProductReset = () => {
  payWayForm.value = {}
}
</script>

<template>
  <!------------------------添加产品支付弹窗------------------------------------->
  <el-dialog v-model="centerDialogVisible"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :show-close="false" :center="true"
             title="新增支付方式"
             width="500" align-center>
    <el-form :model="payWayForm" label-width="80px" :inline="false">
      <el-form-item label="支付产品:">
        <el-select
            v-model="payWayForm.productCode"
            placeholder="选择支付产品..."
            filterable
            remote
            :remote-method="queryProductDic">
          <el-option
              v-for="item in payProductOption"
              :key="item.code"
              :label="item.label"
              :value="item.code"/>
        </el-select>
      </el-form-item>

      <el-form-item label="支付方式:">
        <el-select
            v-model="payWayForm.wayCode"
            @change="selectPayTypeOption"
            placeholder="选择支付方式...">
          <el-option
              v-for="item in payWayOption"
              :key="item.code"
              :label="item.label"
              :value="item.code"/>
        </el-select>
      </el-form-item>
      <el-form-item label="支付类型:">
        <el-select v-model="payWayForm.typeCode" placeholder="选择支付类型...">
          <el-option
              v-for="item in payTypeOption"
              :key="item.code"
              :label="item.label"
              :value="item.code"/>
        </el-select>
      </el-form-item>

      <el-form-item label="收取费率:">
        <el-input v-model="payWayForm.payRate" placeholder="请输入收取费率..."/>
      </el-form-item>

      <el-form-item label="方式排序:">
        <el-select v-model="payWayForm.sorts" placeholder="选择位置...">
          <el-option v-for="item in payTypeOption.length" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div style="margin-left: 250px">
        <el-button @click="router.back()">返回</el-button>
        <el-button type="info" @click="onProductReset">重置</el-button>
        <el-button type="primary" @click="add">提交</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<style scoped>

</style>